<script setup lang="ts">
import { useDictLabel } from '@/hooks'
import router from '@/router'
import { useUserStore } from '@/stores'
import OrderRecentStatPanel from '@/views/shop/order/components/OrderRecentStatPanel.vue'
import SchedulePanel from './components/SchedulePanel.vue'
import TimeClock from './components/TimeClock.vue'

defineOptions({
  name: 'Home',
})

const userStore = useUserStore()
const userInfo = computed(() => userStore.userInfo)

const gotoMyClass = () => {
  router.push({ path: '/home/myClass', query: { id: userInfo.value.id } })
}

const gotoMySellRecord = () => {
  router.push({ path: '/home/my-sell-record' })
}

const toDetail = (data) => {
  router.push({ path: '/education/class/detail', query: { id: data.classId } })
}

onMounted(() => {
  // getSchedule()
})
</script>

<template>
  <div class="home-page h-full p-4">
    <div class="flex gap-3">
      <div class="flex flex-[3.2] flex-shrink-0 flex-col">
        <a-card title="数据统计" class="section px">
          <template #extra>
            <a-space size="mini">
              <TimeClock />
              <a-divider direction="vertical" />
              <a-button type="text">
                <span>更新数据</span>
                <template #icon>
                  <icon-refresh size="12" />
                </template>
              </a-button>
            </a-space>
          </template>
          <OrderRecentStatPanel />
        </a-card>
        <a-card class="section mt px" title="我的课表">
          <SchedulePanel />
        </a-card>
      </div>
      <div class="flex-1 flex-shrink-0 overflow-hidden">
        <div class="border-rd-[4px] bg-white p-[15px]">
          <div class="flex items-center gap-3">
            <a-avatar :size="44" shape="circle">
              <img width="44" height="44" :src="userInfo.avatar" alt="avatar">
            </a-avatar>
            <div>
              <div class="colo-[#111] mb-1 font-size-[16px]">
                {{ userInfo.name }}
                <a-tag v-if="userInfo.type" color="gray">
                  {{ useDictLabel('EmployeeTypeEnum', userInfo.type) }}
                </a-tag>
              </div>
              <a-space>
                <span>{{ userInfo.orgName || '-' }}</span>
              </a-space>
            </div>
          </div>
          <a-divider margin="10px" />
          <div class="item-center flex">
            <div v-for="index in 3" :key="index" class="flex flex-1 flex-col items-center justify-center py-[6px]">
              <div>
                <span class="font-size-[18px] color-[#111] font-600">32.5</span>
                <span class="font-size-[12px] color-[#86909C]"> %</span>
              </div>
              <div class="mt-2 font-size-[12px] color-[#4E5969]">
                学生人数
              </div>
            </div>
          </div>
        </div>
        <a-card title="快捷入口" class="section mt-[10px] px-[15px] pb-[15px]">
          <div class="quick">
            <a-link class="item" @click="gotoMyClass">
              <img src="@/assets/images/fun-icon.png" alt="">
              <div class="mt-1 font-size-[12px] color-[#111]">
                我的班级
              </div>
            </a-link>
            <a-link class="item" @click="gotoMySellRecord">
              <img src="@/assets/images/fun-icon.png" alt="">
              <div class="mt-1 font-size-[12px] color-[#111]">
                我的业绩
              </div>
            </a-link>
          </div>
        </a-card>
        <a-card title="消息通知" class="section mt-[10px] px-[15px] pb-[15px]">
          <template #extra>
            <a-link style="color:#888">
              查看更多
              <icon-double-right />
            </a-link>
          </template>
          <div class="mt-3" />
          <template v-for="(item, index) in 4" :key="index">
            <a-divider v-if="index !== 0" margin="12px" />
            <div class="msg">
              <div class="flex items-center">
                <div class="h-[24px] w-[24px] flex items-center justify-center border-rd-[50%] bg-[#fbefe1]">
                  <img src="@/assets/images/msg.png" class="h-[16px] w-[16px]">
                </div>
                <span class="ml-[8px] font-size-[14px] color-[#111]">系统通知</span>
                <div class="flex-1" />
                <span class="font-size-[14px] color-[#888]">08-16 16:30</span>
              </div>
              <div class="mt-[10px] flex justify-between gap-3">
                <div class="ellipsis-1 flex-1 items-center font-size-[14px] color-[#4E5969]">
                  本系统各位做好数据备份,本系统各位做好数据备份,本系统各位做好数据备份，请各位做好数据备份！
                </div>
                <a-link class="flex-shrink-0">
                  查看
                </a-link>
              </div>
            </div>
          </template>
        </a-card>
        <a-card title="其他统计" class="section mt-[10px] px-[15px] pb-[15px]">
          <div class="mt-[10px] flex">
            <div class="flex flex-1 flex-col items-center justify-center">
              <div>
                <a-space>
                  <icon-dashboard size="16" style="color:#507ff7" />
                  <span class="font-size-[14px] color-[#111]">占比统计</span>
                </a-space>
                <div>
                  <a-space class="mt-2">
                    <div class="font-size-[18px] color-[#111] font-600">
                      102
                    </div>
                    <span class="color-green">
                      6.1%
                      <icon-arrow-fall style="color: #77db89" />
                    </span>
                  </a-space>
                </div>
                <div class="mt-2 font-size-[12px] color-[#999]">
                  昨日：152单
                </div>
              </div>
            </div>
            <a-divider direction="vertical" />
            <div class="flex flex-1 flex-col items-center justify-center">
              <div>
                <a-space>
                  <icon-dashboard size="16" style="color:#507ff7" />
                  <span class="font-size-[14px] color-[#111]">占比统计</span>
                </a-space>
                <div>
                  <a-space class="mt-2">
                    <div class="font-size-[18px] color-[#111] font-600">
                      102
                    </div>
                    <span class="color-green">
                      6.1%
                      <icon-arrow-fall style="color: #77db89" />
                    </span>
                  </a-space>
                </div>
                <div class="mt-2 font-size-[12px] color-[#999]">
                  昨日：152单
                </div>
              </div>
            </div>
          </div>
        </a-card>
      </div>
    </div>
    <!-- <TeacherClassList /> -->
  </div>
</template>

<style lang="less" scoped>
:deep(.arco-card-body) {
  padding-top: 0 !important;
}

:deep(.arco-layout) {
  overflow: hidden;
}

.ellipsis-1 {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.quick {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;

  .item {
    width: calc(25% - 15px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    img {
      width: 32px;
      height: 32px;
    }
  }
}
</style>
